import React, { Component } from 'react';
import { connect } from 'react-redux'
import { Table, Button, Popconfirm, Modal, Input, Card } from 'antd';
import HModal from './HModal';
import './home.css'
import {
    downdata,
    updata,
    onoff,
    del //引入的行为描述文件
} from '../store/home/action'

class home extends Component {
    constructor(props) {
        super(props)
        this.state = {
        }
    }


    hupdata = (index) => {
        this.props.updataModal({ switch: true, title: "更新", index })
    }


    render() {
        let { data } = this.props.home
        return (
            <div>
                <Button type="primary" onClick={() => { this.props.showModal() }}>
                    添 加
                </Button>
                {data.map((item, index) => <div key={index}>
                    <Card hoverable='ture' style={{ width: 700, }}>
                        <div className='box'>
                            <div className='boxcont'>
                                <p>{item.name}</p>
                                <p>{item.age}</p>
                                <p>{item.address}</p>
                            </div>
                            <div className='boxoper'>
                                {index !== 0 ? <Button onClick={() => { this.props.upmodal(index) }}>上移</Button> : ''}
                                {index != data.length - 1 ? < Button onClick={() => { this.props.downmodal(index) }} > 下移</Button> : ""}
                                <Button onClick={() => { this.hupdata(index) }} >更新</Button>
                                <Button onClick={() => { this.props.delmodal(index) }}>删除</Button>
                            </div>
                        </div>
                    </Card>,
                </div >)
                }
                <HModal></HModal>
            </div >
        );
    }
}

//固定语法
const mapStateToProps = state => { // state就是仓库store数据
    // console.log(state, '读取数据');
    return {
        // 组件中通过 this.props.键 来获取数据  获取到的数据塞到props
        home: state.home
    }
}
const mapDispatchToProps = dispatch => {     //更新数据
    return {
        showModal: () => dispatch(onoff({ switch: true, title: "添加", })),          //添加模态框开关
        updataModal: (index) => dispatch(onoff(index)),                             //更新开关
        downmodal: (index) => dispatch(downdata(index)),                            //下移动
        delmodal: (index) => dispatch(del(index)),                                  //删除
        upmodal: (index) => dispatch(updata(index)),                                //上移动
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(home)